<template>
	<view>
		<uni-nav-bar left-icon="arrowthinleft" :title="title" :fixed="true" :border="false"  color="#333" @clickLeft="goBack()"></uni-nav-bar>
		
		<view class="relative">
			<view class="flex align-center justify-between padding-x-30 padding-y-10">
				<view class="radius60 flex1 margin-right-40 padding-x-30 flex align-center" style="background: rgba(102, 102, 102, 0.08);">
					<image src="../../static/img/srh_6.png" style="width: 40rpx;height: 40rpx;"></image>
					<input v-model="q.keyword" @confirm="search()" type="text" class="fs-26 color-333 margin-left-20 ipt flex1" placeholder="请输入">
				</view>
				<view @click="filter = true" class="flex align-center  justify-center">
					<text class="fs-28 color-fuse margin-right-10" v-if="sortIndex == -1">筛选</text>
					<text class="fs-28 color-fuse margin-right-10" v-else>{{sortArr[sortIndex].value}}</text>
					<image src="../../static/img/down_o.png" style="width: 34rpx;height: 34rpx;"></image>
				</view>
			</view>
			<!-- 推荐、销量切换 -->
			<view class="absolute sortCon w100" v-if="flag"   @tap.stop="flag=false">
				<view v-for="(item,index) in sortArr" :key='index' class="fs-26  padding-y-24 solid-bottom bg-fff  padding-x-24" :class="sortIndex == index ? 'color-zhuse' : 'color-333'" @click="changeSort(index)">{{item.value}}</view>
			</view>
		</view>
		
		<view class="clearfix  margin-top-24 padding-x-10">
			<!-- 商家列表 -->
			<view v-for="(item,index) in list" :key='index'  @click="jump('/pages/canyin/detail?id='+item.id)"  class="w50 fl padding-x-10 margin-bottom-30  bg-fff">
				<view class="goods_item">
					<image class="goods_img" :src="item.cover" mode="aspectFit"></image>
					<view class="margin-top-10 padding-x-20">
						<view class="goods_name text-cut-2">{{item.name}}</view>
						<view class="fs-24 flex align-center justify-between padding-y-20">
							<view class="color-999"><text class="color-zhuse margin-right-10">{{item.score}}分</text> | 月售{{item.sale}}</view>
							<view class="color-fuse">{{item.distance || 0}}m</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 商家列表 end -->
		</view>
		<view class="nomore" :class="loadStatus" v-if="list.length"></view>
		<empty v-if="list.length < 1"></empty>
		
		
		<!-- 筛选 -->
		<view v-if="filter"
			class="fixed filterCon bg-fff padding-x-20 padding-y-30 flex align-center justify-between flex-direction">
			<view class="flex align-center w100">
				<image @click="filter = false" src="../../static/img/back.png" style="width: 30rpx;height: 30rpx;">
				</image>
				<view class="fs-30 color-333 flex1 text-center">筛选</view>
			</view>
			<view class="flex1 w100 margin-y-40">
				<view>
					<view class="fs-28 color-333 ">档次</view>
					<view class="margin-top-24 flex align-center  flex-wrap">
						<view v-for="(item,index) in screen.level" :key='index' @click="changeScreen(item.key,'level')" :class="q.level == item.key ? 'on':''" class="nav_item fs-26 color-333 margin-right-24  margin-bottom-24">{{item.value}}</view>
					</view>
				</view>
				<view class="margin-top-40">
					<view class="fs-28 color-333 ">营业时间</view>
					<view class="margin-top-24 flex align-center  flex-wrap">
						<view v-for="(item,index) in screen.hours" :key='index' @click="changeScreen(item.key,'hours')" :class="q.hours == item.key ? 'on':''" class="nav_item fs-26 color-333 margin-right-24  margin-bottom-24">{{item.value}}</view>
					</view>
				</view>
				<!-- <view class="margin-top-40">
					<view class="fs-28 color-333 ">人数</view>
					<view class="margin-top-24 flex align-center  flex-wrap">
						<view v-for="(item,index) in screen.diners" :key='index'  @click="changeScreen(item.key,'diners')"  :class="q.diners == item.key ? 'on':''" class="nav_item fs-26 color-333 margin-right-24  margin-bottom-24">{{item.value}}</view>
					</view>
				</view> -->
			</view>
			<view class="flex align-center justify-center">
				<view @click="cancelCate()" class="fs-30 color-zhuse bg-fff text-center btn1">重置</view>
				<view @click="sureCate()" class="fs-30 color-fff bg-zhuse text-center btn2">筛选</view>
			</view>
		</view>
		<!-- 筛选end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag:false,
				sortArr:[],
				sortIndex:-1,
				title:'',
				q:{
					keyword:'',
					longitude:uni.getStorageSync('longitude'),
					latitude:uni.getStorageSync('latitude'),
					// longitude:'',
					// latitude:'',
					sort:"sort",
					id:"",
					level:"",
					hours:"",
					diners:"",
					page:1,
					classify_pid:'',
					classify_id:''
				},
				screen:[],
				hasMore: true,
				loadStatus: '',
				list: [],
				filter: false,
				screen:[],
			}
		},
		onLoad(opt) {
			this.title = opt.title;
			this.q.classify_id = opt.id;
			this.getScreen()
			this.getList()
		},
		onReachBottom() {
			if(this.hasMore){
				this.q.page += 1;
				this.getList();
			}
		},
		methods:{
			getScreen(){
				this.$api.screen().then(res => {
					if (res.code == 1) {
						this.screen = res.data;
					}
				})
			},
			// init(){
			// 	this.$api.screen().then(res => {
			// 		if (res.code == 1) {
			// 			this.sortArr = res.data.level;
			// 		}
			// 	})
			// },
			changeSort(index){
				this.sortIndex = index;
				this.q.level = this.sortArr[index].key;
				this.q.page = 1;
				this.list = [];
				this.getList()
				this.flag = false;
			},
			getList(){
				this.isLoading = true;
				this.$api.nearby_shop(this.q).then(res=>{
					if(res.code == 1){
						this.isLoading = false;
						this.list = [...this.list, ...res.data.data];
						if (res.data.data.length != 0) {
							this.hasMore = true;
							this.loadStatus = '';
						} else {
							this.hasMore = false;
							this.loadStatus = 'over';
						}
					}
				})
			},
			
			changeScreen(key,type){
				if(type == 'level'){
					this.q.level = key
				}
				if(type == 'hours'){
					this.q.hours = key
				}
				if(type == 'diners'){
					this.q.diners = key
				}
				this.q.page = 1;
			},
			cancelCate(){
				this.filter = false;
				this.q.level = '';
				this.q.hours = '';
				this.q.diners = '';
				this.q.page = 1;
				this.list = [];
				this.getList();
			},
			sureCate(){
				this.filter = false;
				this.q.page = 1;
				this.list = [];
				this.getList();
			},
			
			search(){
				this.q.page = 1;
				this.list = [];
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ipt{height: 70rpx;}
	.index_icon{width: 76rpx;height: 76rpx;}
	.sortCon{
		top: 70rpx;
		background: rgba(0,0,0,0.4);
		height: 100vh;
		z-index: 9;
	}
	.filterCon{width: 100%;height: 100vh;top: 0;left: 0;z-index: 99999;}
	.nav_item{background: rgba(153, 153, 153, 0.1);height: 60rpx;line-height: 60rpx; padding: 0 30rpx;border-radius: 60rpx;}
	.nav_item.on{background: rgba(255, 147, 46, 0.08);color: #FF932E;border: 1rpx solid #FF932E;}
	.btn1{width: 300rpx;height: 82rpx;line-height: 82rpx;border: 1rpx solid #FF932E;}
	.btn2{width: 300rpx;height: 82rpx;line-height: 82rpx;border: 1rpx solid #FF932E;}
</style>
